<template>
  <div class="bigbox">
    <div class="header">
      <van-nav-bar @click-left="$router.push('/home')">
        <template #left>
          <van-icon name="arrow-left" size="20" color="black" />
          返回
        </template>
        <template #title>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
          >
            <template #reference>
              <van-search
                v-model="kindValue"
                placeholder="请输入搜索关键词"
                autofocus
                shape="round"
                class="topinput"
                @search="enter"
              />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </div>

    <div class="main">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="(item, index) in categoryList"
            :key="index"
            :title="item"
            @click="getList(item)"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <van-grid :border="true" :column-num="3">
          <van-grid-item
            v-for="(item, index) in getlist"
            :key="index"
            :text="item.brand"
            @click="brandProList(item.brand)"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { categoryList, categoryBrandList, Hotword } from "../api/kinds";
import Vue from "vue";
import { Sidebar, SidebarItem, NavBar, Search, Grid, GridItem } from "vant";
Vue.use(Search);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(NavBar);
Vue.use(Grid);
Vue.use(GridItem);
export default {
  data() {
    return {
      activeKey: 0, //侧边栏
      kindValue: "", //搜索框
      categoryList: [], //获取分类列表
      getlist: [], //获取分类列表对应的品牌列表
      category: null, //获取分类数据
      showPopover: false,
      actions: [],
    };
  },
  created() {
    categoryList().then((data) => {
      //发送获取分类列表请求
      // console.log(data.data.data);
      this.categoryList = data.data.data;
    });
    categoryBrandList({ category: "手机" }).then((data) => {
      //第一次刷新页面时，默认是手机
      // console.log(data);
      this.category = "手机";
      this.getlist = data.data.data;
    });
    Hotword().then((data) => {
      console.log(data.data.data);
      data.data.data.forEach((item) => {
        if (item.keyword) {
          this.actions.push({ text: item.keyword });
        }
      });
      console.log(this.actions);
    });
  },
  methods: {
    getList(item) {
      //点击列表获取品牌分类
      console.log(item);
      this.category = item;
      categoryBrandList({ category: item }).then((data) => {
        console.log(data);
        this.getlist = data.data.data;
      });
    },
    brandProList(brand) {
      //获取品牌分类的分类
      this.$router.push("/kindsgoods/" + this.category + "/" + brand);
      console.log(this.category, brand);
      this.kindValue = brand;
    },
    enter() {
      //搜索框搜索
      this.$router.push("/search/" + this.kindValue);
    },
    onSelect(action) {
      this.kindValue = action.text;
      this.enter();
    },
  },
  name: "Kinds",
  components: {},
};
</script>

<style scoped>
.search {
  padding: 0;
}
.main {
  display: flex;
  flex-wrap: wrap;
}
.left {
  width: 20%;
}
.right {
  width: 79%;
  position: fixed;

  /* top: 0; */
  /* right: 0; */
  /* top: 0; */
  /* right: 0; */
  left: 21%;
}
</style>